<template>
  <div style="margin-top: 70px">
    <router-view/>
  </div>
  <div style="position: fixed; left: 0; right: 0; top: 0;">
    <nut-navbar :left-show="false" @on-click-send="openLeft" :title="title" icon="horizontal">
<!--      <template #icons>-->
<!--        <nut-icon class="icon" name="refresh" @on-click-slot-send="morelist"></nut-icon>-->
<!--      </template>-->
    </nut-navbar>
  </div>
  <nut-popup
      position="left"
      v-model:visible="showLeft"
      :style="{ height: '100%', width: '50%', maxWidth: '500px', minWidth: '250px', backgroundColor: '#F0F0F0', padding: '15px'}"
  >
    <div style="padding: 10px">
      <nut-avatar bg-color="#FFCC66">{{ user.name && user.name.substr(user.name.length - 2, 2) }}</nut-avatar>
    </div>

    <nut-cell-group title="我的信息">
      <nut-cell title="姓名" icon="my" :desc="user.name"></nut-cell>
      <nut-cell title="学号" icon="scan" :desc="user.num"></nut-cell>
      <nut-cell title="班级" icon="location" :desc="user['class']"></nut-cell>
      <nut-cell title="专业" icon="tips" :desc="user.major"></nut-cell>
    </nut-cell-group>

    <nut-cell-group title="功能" @click="closeLeft">
      <nut-cell title="首页" icon="home" to="home"></nut-cell>
      <nut-cell title="课表详情" icon="date" to="course"></nut-cell>
      <nut-cell title="成绩详情" icon="find" to="score"></nut-cell>
      <nut-cell title="考试详情" icon="edit" to="exam"></nut-cell>
      <!--      <nut-cell title="天气详情" to="weather"></nut-cell>-->
    </nut-cell-group>

    <nut-cell-group title="更多" @click="closeLeft">
<!--      <nut-cell title="设置" icon="setting" to="setting"></nut-cell>-->
      <nut-cell title="退出" icon="circle-close" to="login"></nut-cell>
    </nut-cell-group>
  </nut-popup>
  <nut-backtop :distance="20"></nut-backtop>
</template>

<script>
import global from "@/components/global";

export default {
  name: "navView",
  data() {
    return {
      title: '首页',
      showLeft: false,
      user: {}
    }
  },
  watch: {
    $route() {
      this.refreshTitle()
    }
  },
  methods: {
    refreshTitle() {
      switch (this.$route.fullPath) {
        case '/login':
          this.title = '登录'
          break;
        case '/home':
          this.title = '首页'
          break;
        case '/course':
          this.title = '课程'
          break;
        case '/score':
          this.title = '成绩'
          break;
        case '/exam':
          this.title = '考试'
          break;
        case '/weather':
          this.title = '天气'
          break;
        case '/setting':
          this.title = '设置'
          break;
        default:
          break;
      }
    },
    openLeft() {
      this.showLeft = true;
    },
    closeLeft() {
      this.showLeft = false;
    },
    loadData() {
      let that = this
      global.http(this, 'api/user/info/', {
        success(r) {
          that.user = r.data
        }
      })
    }
  },
  mounted() {
    this.refreshTitle()
    this.loadData()
  }
}
</script>

<style scoped>

</style>